<template>
  <div class="box">
    <h1>ref$parent</h1>
    <h2>Money:{{ money }}</h2>
    <button @click="handler">Borrow money from Son</button>
    <hr />
    <Son ref="son"></Son>
    <daughter></daughter>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Son from "./son.vue";
import daughter from "./daughter.vue";
// ref:可以获取真实的DOM节点，可以获取到子组件实例VC
// $parent:可以在子组件内部获取到父组件的实例

//父组件钱数
let money = ref(1000);
//如果想让外部访问需要通过defineExpose方法对外暴露
defineExpose({
  money,
});

//获得子组件实例
let son = ref();

//父组件内部按钮点击回调
const handler = () => {
  // console.log("Borrow money", son.value);
  const count = 10;
  money.value -= count;
  son.value.money -= count;
};
</script>
<style scoped>
.box {
  width: 100vw;
  height: 700px;
  background-color: chocolate;
}
</style>
